import React from 'react';
import { View, ScrollView, StyleSheet, Text } from 'react-native';
import BasicDemo from "./Basic";
import CustomBasic from "./CustomBasic";
import Page from "./LoadMinimal";
import PageTwo from "./loadMinimalLoader";
import NestDemo from "./nest";
import OnIndexChangedDemo from "./onIndexChanged";
import OnResponderReleaseDemo from "./onResponderRelease";
import OnTouchStartCaptureDemo from "./onTouchStartCapture";
import PagingEnabledDemo from "./pagingEnabled";
import PhoneDemo from "./Phone";
import ScrollByDemo from "./scrollBy";
import SwiperDemo from "./Swiper";
import SwiperButtonandDot from "./SwiperButtonandDot";
import SwiperNumber from "./SwiperNumber";

const ReactNativeSwiper = () => {
  const examples = [
    { title: "Basic Swiper", component: <BasicDemo /> },
    { title: "Custom Basic Swiper", component: <CustomBasic /> },
    { title: "Load Minimal Content", component: <Page /> },
    { title: "Load Minimal with Loader", component: <PageTwo /> },
    { title: "Nested Swipers", component: <NestDemo /> },
    { title: "onIndexChanged Event", component: <OnIndexChangedDemo /> },
    { title: "onResponderRelease Event", component: <OnResponderReleaseDemo /> },
    { title: "onTouchStartCapture Event", component: <OnTouchStartCaptureDemo /> },
    { title: "Paging Enabled", component: <PagingEnabledDemo /> },
    { title: "Phone Gallery Demo", component: <PhoneDemo /> },
    { title: "Scroll By Programmatically", component: <ScrollByDemo /> },
    { title: "Standard Swiper", component: <SwiperDemo /> },
    { title: "Swiper with Buttons & Dots", component: <SwiperButtonandDot /> },
    { title: "Numbered Swiper", component: <SwiperNumber /> },
  ];

  return (
    <ScrollView 
      style={styles.scrollContainer} 
      contentContainerStyle={styles.scrollContent}
    >
      <View style={styles.header}>
        <Text style={styles.mainTitle}>React Native Swiper</Text>
        <Text style={styles.subtitle}>
          A feature-rich, customizable swiper component for React Native
        </Text>
      </View>
      
      {examples.map((example, index) => (
        <View key={index} style={styles.exampleContainer}>
          <Text style={styles.title}>{example.title}</Text>
          <View style={styles.componentWrapper}>
            {example.component}
          </View>
        </View>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollContainer: {
    flex: 1,
    backgroundColor: '#f8f9fa',
  },
  scrollContent: {
    padding: 16,
    paddingBottom: 32,
  },
  header: {
    marginBottom: 24,
    padding: 16,
    backgroundColor: '#ffffff',
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 6,
    elevation: 2,
  },
  mainTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1a1a1a',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    lineHeight: 24,
  },
  exampleContainer: {
    marginBottom: 24,
    padding: 16,
    backgroundColor: 'white',
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 6,
    elevation: 2,
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 12,
    color: '#2c3e50',
    paddingBottom: 8,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  componentWrapper: {
    height: 500, // 为每个Swiper组件设置固定高度
    borderRadius: 8,
    overflow: 'hidden',
    backgroundColor: '#f0f4f8',
  },
});

export const displayName = "ReactNativeSwiper";
export const framework = "React";
export const category = "UI";
export const title = "react-native-swiper";
export const documentationURL = "https://github.com/react-native-oh-library/react-native-swiper";
export const description = "A feature-rich, customizable swiper component for React Native";

export const examples = [
  {
    title: "react-native-swiper",
    render: function (): any {
      return <ReactNativeSwiper />;
    },
  },
];